<template>
  <by-background />

  <by-navigation-bar title="服务设置" />

  <view class="padding-20">
    <view class="padding-tb-10 padding-lr-20 bg-white page">
      <by-cell
        v-for="(item,index) in list"
        :key="index"
        :label="item.label"
        :border="index < list.length - 1"
        :show-arrow="index === list.length - 1"
        @click="chooseStatus(item.value)"
      >
        <by-radius v-if="index < list.length - 1" :model-value="item.value === form.statusValue" />
      </by-cell>
    </view>
  </view>

  <by-draw-bottom v-model="showSetting" watch-back>
    <view class="padding-top-40 padding-lr-30 padding-bottom-20">
      <view class="text-center margin-bottom-36">
        <text class="text-32 color-t1">服务范围</text>
      </view>
      <view class="padding-lr-10">
        <view class="flex-row align-center">
          <switch :checked="form.open" class="switch" color="#FFDA27" @change="handleChange($event, 'open')"/>
          <text class="text-30 color-t1 margin-left-20">不限距离</text>
        </view>

        <slider
          class="slider"
          min="10"
          max="100"
          step="10"
          backgroundColor="#ECECEC"
          activeColor="#FFDA27"
          :value="form.distance"
          :disabled="form.open"
          @changing="handleChange($event, 'distance')"
        />

        <view class="flex-row align-center justify-between">
          <text class="text-28 color-t2">10km</text>
          <text class="text-28 color-t2">{{ form.open ? '不限' : `${form.distance}km` }}</text>
        </view>

        <view class="text-center margin-top-40">
          <text class="text-26 color-t2">注意：该距离为技师至用户最大服务半径，至少设置10km</text>
        </view>
      </view>

      <view class="margin-top-60">
        <by-button height="78rpx" font-size="32rpx" bold text="确 定" @click="changeDistance"/>
      </view>
    </view>
  </by-draw-bottom>
</template>

<script setup lang="ts">
import useUserStore from '@/store/user'
import { updateServiceStatus, getUserInfo, updateServiceDistance } from '@/common/api'
import type { AnyObject } from '@/common/types'

const userStore = useUserStore()
type serverStatus = 'ONLINE' | 'OFFLINE' | 'RESTING' | ''
const showSetting = ref(false)

const form = reactive({})

const list = [
  { label: '可服务', value: 'ONLINE' },
  { label: '休息中', value: 'RESTING' },
  { label: '下线', value: 'OFFLINE' },
  { label: '展示范围', value: '' }
]

async function init() {
  await getUserInfo()
  const { serviceStatus, serviceDistance, serviceDistanceLimit } = toRefs(userStore.userInfo)
  Object.assign(form, {
    statusValue: serviceStatus.value,
    open: serviceDistanceLimit.value === 1,
    distance: serviceDistance.value
  })
}
init()

function chooseStatus(value:serverStatus) {
  if (value) changeStatus(value)
  else showSetting.value = true
}

async function handleChange(e:AnyObject, attr: 'open' | 'distance') {
  const { value } = e.detail
  form[attr] = value
}

async function changeStatus(value:serverStatus) {
  form.statusValue = value
  await updateServiceStatus({
    serviceStatus: value
  })
  getUserInfo()
}

async function changeDistance() {
  const params = {
    serviceDistance: form.distance,
    serviceDistanceLimit: form.open ? 1 : 0
  }
  await updateServiceDistance(params)
  showSetting.value = false
  getUserInfo()
}
</script>

<style scoped lang="scss">
@include setMargin(bottom, 36);

@include setMargin(top, 60);

.page{
  border-radius: 16rpx;
}

.switch{
  width: 110rpx;
  height: 60rpx;
}

.slider{
  margin: 124rpx 10rpx 24rpx;

  ::v-deep.uni-slider-handle-wrapper{
    height: 10rpx;
    border-radius: 6rpx;
  }

  ::v-deep.uni-slider-handle{
    width: 54rpx;
    height: 54rpx;
    background: #FFFFFF;
    border: none;
  }

}
</style>
